<template>
  <div>
    <el-dialog
      :title="!dataForm.id ? '新增交互页面' : '修改'"
      width="40%"
      :close-on-click-modal="false"
      :visible.sync="visible"
      append-to-body
    >
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="160px"
      >
        <el-form-item label="页面名称:" prop="tempName">
          <el-input
            style="width: 25.5rem"
            v-model="dataForm.tempName"
            placeholder="请输入页面名称"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="分公司:" prop="remark">
          <el-input style="width:25.5rem" v-model="dataForm.remark" placeholder="分公司"></el-input>
        </el-form-item> -->
        <el-form-item label="创建编号:" prop="">
          <el-input
            disabled
            style="width: 25.5rem; background: gray"
            placeholder="编号"
          ></el-input>
          <!-- <el-button type="primary" @click="dataResetForm('dataForm')">编号</el-button> -->
        </el-form-item>
        <!-- <el-form-item label="创建人:" prop="remark">
          <el-input style="width: 25.5rem" v-model="dataForm.remark" placeholder="创建人"></el-input>
        </el-form-item> -->
        <el-form-item label="页面状态" v-if="dataForm.id !== 0">
          <el-radio-group v-model="dataForm.state">
            <el-radio label="1">正常</el-radio>
            <el-radio label="0">禁用</el-radio>
            <!-- <el-radio label="正常"></el-radio> -->
            <!-- <el-radio label="禁用"></el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input
            type="textarea"
            style="width: 25.5rem"
            maxlength="200"
            show-word-limit
            v-model="dataForm.remark"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否使用通用页面图片:">
          <el-radio-group v-model="dataForm.radio">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择图片" v-if="dataForm.radio === 0">
          <el-upload
            :action="imgAction"
            list-type="picture-card"
            :file-list="fileList"
            name="images"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dataResetForm('dataForm')">取消</el-button>
        <el-button type="primary" @click="nextStep('dataForm')"
          >下一步</el-button
        >
        <!-- <el-button type="primary" @click="dataFormSubmit('dataForm')">确定</el-button> -->
      </span>
    </el-dialog>
    <interactiveView
      ref="interactiveView"
      @refEachOther="refEachOther()"
    ></interactiveView>
  </div>
</template>
  
<script>
import { treeDataTranslate } from "@/utils";
import interactiveView from "./interactiveView";
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0,
        roleName: "",
        remark: "",
        state: "1",
        tempName: "", //页面名称
        desc: "",
        radio: 1,
        imgUrls:""
      },
      fileList: [],
      dataRule: {
        tempName: [
          { required: true, message: "页面名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  components: {
    interactiveView,
  },
  created() {
    this.imgAction = this.$http.adornUrl(
      `cpcpdu/uploadImg?token=${this.$cookie.get("token")}`
    );
  },
  watch: {
    visible(newVal, oldVal) {
      if (newVal === false) {
        console.log("innerVisible-innerVisible");
        this.dataForm.radio = 1
        this.fileList = []
        this.dataForm.imgUrls = ""
      }
    },
  },
  methods: {
    init(data) {
      this.dataForm.id = data || 0;
      this.visible = true;
      if (this.dataForm.id === 0) {
        // console.log("增加");
        this.dataForm.tempName = "";
        this.dataForm.remark = "";
        this.dataForm.state = "1";
      } else {
        // console.log("编辑");
        let obj = JSON.parse(JSON.stringify(data)); //深拷贝,拷贝的是对象
        // console.log("obj===", obj);
        this.dataForm.tempName = obj.tempName;
        this.dataForm.remark = obj.remark;
        this.dataForm.state = obj.state.toString();
      }
    },
    dataResetForm(dataForm) {
      this.visible = false;
      this.$refs[dataForm].resetFields();
    },
    //
    refEachOther() {
      this.visible = false;
      console.log("-------------------------------");
      this.$emit("refEach");
    },
    handleExceed(file) {
      this.$message.warning("最多上传1张图片");
    },
    handleSuccess(file) {
      console.log("wwwwwwwwwwwwwwww", file);
      console.log("wwwwwwwwwwwwwwww", file.data);
      this.dataForm.imgUrls = file.data
      let obj = {};
      obj.url = file.data;
      this.fileList.push(obj);
      console.log("this.fileList===",this.fileList);
    },
    handleRemove(file, fileList) {
      console.log("file===", file);
      console.log("file===", fileList);
      let ss = file.url;
      let index = ss.lastIndexOf("/");
      let result = ss.substr(index + 1, ss.length);
      this.fileList = fileList.slice(-3);
      console.log("resultresultresult===", result);
      console.log("file===77777777777777777777", fileList);
    },
    handlePictureCardPreview(file) {
      console.log("file===",file);
      // this.isUploadImgShow = true;
      this.dataForm.imgUrls = file.url;
      console.log("this.dataForm.imgUrls==",this.dataForm.imgUrls);
    },
    //下一步
    nextStep() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$nextTick(() => {
            console.log("tttt==", this.dataForm);
            // this.dataForm.imgUrls = 'http://134.64.251.212:8084//cpcp/imgUrl/橙色预警.png'
            this.$refs.interactiveView.init(this.dataForm);
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          return;
          this.$http({
            url: this.$http.adornUrl(
              `/sys/role/${!this.dataForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              roleId: this.dataForm.id || undefined,
              roleName: this.dataForm.roleName,
              remark: this.dataForm.remark,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};
</script>
  